<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <ul class="mui-table-view">
        <li
          class="mui-table-view-cell mui-media"
          @click="getSingerInfo(item.ting_uid)"
          v-for="item in singerList"
          :key="item.index"
        >
          <!-- <router-link :to="'/singer/singerinfo/'+item.ting_uid"> -->
          <!-- 歌手头像 -->
          <img class="mui-media-object mui-pull-left" :src="item.avatar_big" />
          <!-- 歌手名称 -->
          <p class="mui-ellipsis">{{item.name}}</p>
          <!-- </router-link> -->
        </li>
      </ul>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      singerList: [],
      singerId: [
        "2517",
        "7994",
        "1091",
        "45561",
        "2507",
        "245815",
        "1077",
        "1204",
        "1117",
        "82366"
      ],
      isLoading: false,
    };
  },
  created() {
    this.getSingerList();
  },
  methods: {
    getSingerList() {
      for (let item of this.singerId) {
        const singerListURL =
          this.HOST +
          //歌手info
          "/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid=" +
          item;
        this.$axios
          .get(singerListURL)
          .then(res => {
            const infoObj = {};
            //歌手名称
            infoObj.name = res.data.name;
            //歌手头像
            infoObj.avatar_big = res.data.avatar_big;
            //歌手id
            infoObj.ting_uid = res.data.ting_uid;
            this.singerList.push(infoObj);
            // console.log(this.singerList);
          })
          .catch();
      }
    },
    getSingerInfo(id) {
      //   直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: `/singer/singerinfo/${id}`
      });
    },
    onRefresh() {
      setTimeout(() => {
        // Toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 1000);
    }
  }
};
</script>
<style scoped>
.mui-table-view .mui-media-object.mui-pull-left {
  border: 1px solid #ccc;
  border-radius: 50%;
}
.mui-table-view-cell {
  width: 95%;
  text-align: center;
}
.mui-table-view-cell p {
  line-height: 40px;
  text-align: justify;
}
</style>